<template>
	<router-view :key="$route.fullPath"></router-view>

	<div class="ws-element">
		<div style="width: 30px">《</div>
		<div style="width: 80px; margin: 10px 0">
			<div @click="changeWs(1)" :style="{ color: name == '中舟一号' ? 'red ' : '' }">中舟一号</div>
			<div style="height: 10px"></div>
			<div @click="changeWs(2)" :style="{ color: name == '中舟二号' ? 'red ' : '' }">中舟二号</div>
		</div>
	</div>
</template>
<script setup>
import { onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const detectZoom = () => {
	let ratio = 0,
		screen = window.screen,
		ua = navigator.userAgent.toLowerCase()
	if (window.devicePixelRatio !== undefined) {
		ratio = window.devicePixelRatio
	} else if (~ua.indexOf('msie')) {
		if (screen.deviceXDPI && screen.logicalXDPI) {
			ratio = screen.deviceXDPI / screen.logicalXDPI
		}
	} else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
		ratio = window.outerWidth / window.innerWidth
	}
	if (ratio) {
		ratio = Math.round(ratio * 100)
	}
	if (route.path.indexOf('rhost') !== -1) {
		document.body.style.zoom = ''
	} else {
		document.body.style.zoom = 80 / Number(ratio)
	}

	return ratio
}
detectZoom()
// 监听窗口大小变化
window.addEventListener('resize', detectZoom)
import { ENGINE_LEFT, ENGINE_RIGHT } from './utils/const.js'
let ws = ref(null)
let allData = ref({ communication: true })
let engine = ref(ENGINE_LEFT)
let url = ref(localStorage.getItem('url') || `ws://${import.meta.env.VITE_PRO_IP}:9998/websocket`)
let name = ref(localStorage.getItem('name') || '中舟一号')
let bucketName = ref(localStorage.getItem('bucketName') || 'ship_one')
provide('engine', engine)
provide('allData', allData)
provide('url', url)
provide('name', name)
provide('bucketName', bucketName)
const WSClient = () => {
	let localUrl = localStorage.getItem('url')
	if (!localUrl) {
		localUrl = url.value
		localStorage.setItem('url', url.value)
		localStorage.setItem('name', name.value)
		localStorage.setItem('bucketName', bucketName.value)
	}
	console.log(localUrl, '=====qe')
	console.log(localUrl.indexOf(`${import.meta.env.VITE_PRO_IP}:9998`) == -1, '=====qe')
	console.log(localUrl.indexOf(`${import.meta.env.VITE_PRO_IP}:9994`) == -1, '=====qe')
	if (
		localUrl &&
		localUrl.indexOf(`${import.meta.env.VITE_PRO_IP}:9998`) == -1 &&
		localUrl.indexOf(`${import.meta.env.VITE_PRO_IP}:9994`) == -1
	) {
		url.value = `ws://${import.meta.env.VITE_PRO_IP}:9998/websocket`
		name.value = '中舟一号'
		bucketName.value = 'ship_one'
		localUrl = url.value
		localStorage.setItem('url', url.value)
		localStorage.setItem('name', name.value)
		localStorage.setItem('bucketName', bucketName.value)
	}
	ws.value = new WebSocket(localUrl)
	ws.value.onopen = (e) => {
		console.log('open', e)
	}
	ws.value.addEventListener('message', function (event) {
		let { state, gpsPostitionDeviceService, shiplogDeviceService } = JSON.parse(event.data) || {}
		Object.assign(allData.value, JSON.parse(event.data) || {})
		allData.value.geo = gpsPostitionDeviceService
		allData.value.apparatus = shiplogDeviceService
		allData.value.communication = !state
		console.log(allData.value, 'allData====>')
	})
	ws.value.onerror = (e) => {
		allData.value.communication = true
		WSClient()
	}
	ws.value.onclose = () => {
		allData.value.communication = true
	}
}
const changeWs = (val) => {
	if (val == 1) {
		localStorage.setItem('url', `ws://${import.meta.env.VITE_PRO_IP}:9998/websocket`)
		localStorage.setItem('name', '中舟一号')
		localStorage.setItem('bucketName', 'ship_one')
	} else {
		localStorage.setItem('url', `ws://${import.meta.env.VITE_PRO_IP}:9994/websocket`)
		localStorage.setItem('name', '中舟二号')
		localStorage.setItem('bucketName', 'ship_two')
	}
	window.location.reload()
}
WSClient()
// watch(
// 	() => url.value,
// 	(newVal, oldVal) => {
// 		ws.value.close()
// 		console.log('===1111>')
// 		name.value = localStorage.getItem('name')
// 		WSClient()
// 	}
// )
</script>

<style>
.float-element {
	/* 固定定位在左下角 */
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999; /* 确保悬浮在最上层 */

	/* 样式美化 */
	background: #42b983;
	color: white;

	border-radius: 25px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: transform 0.3s ease;
	text-align: center;
	line-height: 50px;
	/* 新增宽高属性 */
	width: 120px;
	height: 50px;
}
.ws-element {
	/* 固定定位在左下角 */
	position: fixed;
	right: 0;
	top: 50%;
	z-index: 9999; /* 确保悬浮在最上层 */
	/* 样式美化 */
	background: #0d4bde;
	color: white;
	cursor: pointer;
	transition: transform 0.3s ease;
	display: flex;
	align-items: center;
	transform: translateX(80px);
}
.ws-element:hover {
	transform: translateX(0px);
}
</style>
